<template>
    <div>
        <div style="display: flex">
            <!--        侧边栏-->
            <SidebarComponent :isCollapse="isCollapse" :style="'min-width:'+ sideBarWidth+'px;width:'+ sideBarWidth+'px'"></SidebarComponent>



            <div :style="'width: '+(1920-sideBarWidth)+'px;'">
                <!--        顶部栏-->
                <TopBarComponent :iconStyle="iconStyle" @listenState="checkAsideBarState"></TopBarComponent>

<!--                主体区域-->
                <div class="mainArea">
                    <router-view />
                </div>

            </div>
        </div>




    </div>

</template>

<script>
    import SidebarComponent from "@/components/BackendSystem/Sidebar";
    import TopBarComponent from "@/components/BackendSystem/TopBar";

    export default {
        name: "BackendFramework",
        components:{
            SidebarComponent,
            TopBarComponent
        },
        data(){
            return{
                //侧边栏是否折叠
                isCollapse: false,
                //侧边栏的宽度
                sideBarWidth: 192,
                iconStyle: 'el-icon-s-fold',
            }
        },
        methods:{
            checkAsideBarState(){
                this.isCollapse=!this.isCollapse;
                //判断是否展开切换折叠
                if (this.iconStyle=='el-icon-s-fold'){
                    this.iconStyle='el-icon-s-unfold';
                    this.sideBarWidth=58;
                }else{
                    this.iconStyle='el-icon-s-fold';
                    this.sideBarWidth=192;

                }

            }
        }
    }

</script>

<style scoped>

    .mainArea{
        width: 100%;
        height: calc(100% - 56px);
        background: #f3f3f4;
    }


</style>
